<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="topNav">
        <div class="floatRight">
            <div class="topTitle">
                登录
            </div>
            <div class="topTitle">
                注册
            </div>
            <div class="topTitle">
                我的订单
            </div>
            <div class="topTitle">
                帮助中心
            </div>
            <div class="topTitle">
                在线客服
            </div>
            <div class="topTitle">
                手机版
            </div>
        </div>
    </div>
    <div class="middleNav">
        <div class="floatLeft">
            <img src="C:\Users\dante\Pictures\Screenshots\logo.png" class="floatLeft">
        </div>
        <div class="middle">
            <a href="index2.html">
                首页
            </a>
            <a href="book.html">
                图书库
            </a>
            <a href="video2.html">
                教学资料库
            </a>
            <a href="about.html">
                关于我们
            </a>
        </div>
        <div class="floatRight search">
            <input class="midinput" placeholder="请输入关键字">
            <button class="midbutton">搜索</button>
        </div>
    </div>
    <div class="middleSite">
        <div class="leftNav floatLeft">
            <div class="leftTitle">
                前端开发
            </div>
            <div class="leftTitle">
                后端开发
            </div>
            <div class="leftTitle">
                计算机
            </div>
            <div class="leftTitle">
                兴趣技能
            </div>
            <div class="leftTitle">
                考研
            </div>
            <div class="leftTitle">
                艺术
            </div>
            <div class="leftTitle">
                更多方向
            </div>

        </div>
        <div class="banner floatRight">
            <img src="img1.jpeg">
            <img src="2_2025-09-02_223342_278.png">
            <img src="3.png">
            <button style="left: 5px;" id="leftBtn">&lt</button>
            <button style="right: 5px;" id="rightBtn">&gt</button>
        </div>
    </div>
    <div class="bottom">
        │© 2025 在线学习平台  |  隐私政策  |  使用条款  |  联系我们   │
    </div>
</body>
<script>
    var index = 1;//代表哪张图片显示
    var max = 3;//现在有三张图片
    var firstImgDom = document.querySelector('.banner img');
    firstImgDom.style.display = 'block';

    var bottonDomLeft = document.querySelector('#leftBtn');
    var bottonDomRight = document.querySelector('#rightBtn');
    bottonDomLeft.onclick = function(){
        //获取第三个元素的dom（或者说上一个元素的序号）
        var nextIndex = ((index + 1) % max) + 1;
        var nextImgDom = document.querySelector(".banner img:nth-child("+nextIndex+")");//即将显示的图片
        nextImgDom.style.display = 'block';
        var nowImgDom = document.querySelector(".banner img:nth-child("+index+")");   //现在显示的图片
        nowImgDom.style.display = 'none';
        index = nextIndex;//把下一张的索引赋值给现在的
    }
    bottonDomRight.onclick = function(){
        var nextIndex = (index % max) + 1;
        var nextImgDom = document.querySelector(".banner img:nth-child("+nextIndex+")");//即将显示的图片
        nextImgDom.style.display = 'block';
        var nowImgDom = document.querySelector(".banner img:nth-child("+index+")");   //现在显示的图片
        nowImgDom.style.display = 'none';
        index = nextIndex;//把下一张的索引赋值给现在的
    }

</script>

<style>
    @import url("topNav.css");
    @import url("common.css");
    @import url("middleNav.css");
    @import url("middleSite.css");
    @import url("bottom.css");
    * {
        box-sizing: border-box;
    }
</style>

</html>